<template>
	<div class="theme">
		<van-nav-bar :title="$t('CrowdRaisingRecords.v1')" :left-text="$t('MyDividend.v6')" left-arrow @click-left="onClickLeft" />
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" " :loosing-text="$t('MyDividend.v7')" :loading-text="$t('MyDividend.v8')">
					<van-list v-model="loading" :finished="finished" :finished-text="$t('MyDividend.v9')" :loading-text="$t('MyDividend.v8')" @load="onLoad">
						<div style="background: white;color: rgb(125, 126, 128);padding: 10px;border-top: 1px solid rgb(245, 245, 245);margin-bottom: 0px;" class="bg-overlayColor product-title-color product-title-border-color" v-for="(item,index) in participate" :key="index">
							<van-row>
								<van-col span="4" style="text-align: left;" v-text="item.userName"></van-col>
								<van-col span="10" style="padding-top: 2px;text-align: center;">{{item.createTime | formatDate}}</van-col>
								<van-col span="10" style="text-align: right;" v-text="item.payType == 1 ? item.payExuu + ' USDT' : item.payExuu +  ' Estate' "></van-col>
							</van-row>
						</div>
					</van-list>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script>
	import { crowdfunding } from './../utils/api';
	import { formatDate } from './../utils/date';
	let _this;
	export default {
		name: 'CrowdRaisingRecords',
		components: {},
		props: {},
		data() {
			return {
				list: [],
				size: 10, // 每页数量
				current: 1,
				total: '', // 总数量
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading: false,
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			getList() {
				crowdfunding.getParticipateById({
					projectId: this.$route.query.projectId,
					current: 1,
					size: this.size
				}).then(res => {
					if(res.code == 200) {
						this.participate = res.data.records;
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading = false;
						}
					}
				})
			},
			onRefresh() { // 下拉刷新
				this.getList();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: _this.$t('MyDividend.v10')
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.getList();
			},
			onClickLeft() {
				this.$router.back(-1);
			}
		},
		created() {},
		mounted() {},
		destroyed() {

		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		}
	};
</script>

<style lang="less" scoped>
	.van-hairline--bottom::after {
		border: 0;
	}
	
	.overlay-content {
		margin-top: 10px;
	}
	
	.van-pull-refresh {
		overflow: visible!important;
	}
</style>